<template>
  <div class="cus-image" :style="width + ';' + height">
    <ElImageViewer
      style="width: 100%; height: 100%"
      :src="src"
      :fit="fit"
      :alt="alt"
      :referrerPolicy="referrerPolicy"
      :zIndex="zIndex"
      :preview-src-list="previewSrcList"
      @click="cusPreviewImage"
    >
    </ElImageViewer>
    <span class="el-image-viewer__download" v-show="dnFlag">
      <div>
        <div>项目名称：{{ formData.name }}</div>
        <div>图片来源：</div>
        <div>隐患性质：</div>
        <div>安全区域：</div>
        <div>清单分类：</div>
        <div>上传人员：</div>
        <div>上传时间：</div>
      </div>
    </span>
    <span class="el-image-viewer__view" v-show="dnFlag">
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            background: rgb(25, 25, 25);
          "
        >
          <div
            style="
              display: inline-block;
              color: white;
              height: 200px;
              line-height: 200px;
              text-align: center;
              width: 3%;
              background: rgb(49, 49, 49);
            "
          >
            <i class="el-icon-arrow-left"></i>
          </div>
          <div style="display: flex; width: 94%">
            <div
              v-for="(item, index) in previewSrcList"
              :key="index"
              style="margin: 10px"
            >
              <el-image
                style="height: 180px; width: 120px"
                :src="item"
              ></el-image>
            </div>
          </div>
          <div
            style="
              display: inline-block;
              color: white;
              height: 200px;
              line-height: 200px;
              text-align: center;
              width: 3%;
              background: rgb(49, 49, 49);
            "
          >
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </span>
  </div>
</template>
<script>
import ElImageViewer from "@/views/biz/imgAlbum/main.vue";
export default {
  components: {
    ElImageViewer,
  },
  name: "cusImage",
  data() {
    return {
      dnFlag: false,
      wrapperElem: null,
      hidElClassNameLists: [
        "el-image-viewer__mask",
        "el-image-viewer__btn el-image-viewer__close",
        "el-icon-close",
      ],
    };
  },
  props: {
    src: {
      type: String,
      default: "",
    },
    previewSrcList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    fit: {
      type: String,
      default: "",
    },
    alt: {
      type: String,
      default: "",
    },
    referrerPolicy: {
      type: String,
      default: "",
    },
    zIndex: {
      type: Number,
      default: 2000,
    },
    formData: {
      type: Object,
      default: null,
    },
  },
  methods: {
    cusPreviewImage() {
      this.dnFlag = true;
      this.checkElemlents();
    },
    checkElemlents() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          "el-image-viewer__wrapper"
        );
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        } else {
          this.checkElemlents();
        }
      });
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideCusBtn);
    },
    hideCusBtn(e) {
      let className = e.target.className;
      if (this.hidElClassNameLists.includes(className)) {
        this.dnFlag = false;
      }
    },
  },
};
</script>
<style scoped>
.cus-image {
  display: inline-block;
}
.el-image-viewer__download {
  top: 0;
  padding-top: 40px;
  right: 0;
  width: 17.5%;
  height: 100%;
  font-size: 24px;
  color: #fff;
  background-color: rgb(49, 49, 49, 0.5);
  z-index: 99999999; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
  cursor: pointer;
  position: fixed;
}
.el-image-viewer__view {
  top: 80%;
  padding-top: 0;
  left: 230px;
  width: 70.47%;
  height: 20%;
  font-size: 24px;
  color: #fff;
  background-color: rgb(49, 49, 49, 0.5);
  z-index: 99999999; /* 如果该组件需要传递 z-index 的值，这个值也需要做成动态的 props */
  cursor: pointer;
  position: fixed;
}
</style>
